<template>
  <div id="app">
    <Header></Header>
    <!-- 书写路由组件出口 -->
    <router-view></router-view>
    <!-- 在Home和Search显示在Logoin和Register隐藏  通过路由的meth源信息中的show属性判断 -->
    <Footer v-show="$route.meta.show"></Footer>
  </div>
</template>

<script>
import Header from './components/Header'
import Footer from './components/Footer'
export default {
  name: 'App',
  components: {
    Header,
    Footer
  },
  /* 跟组件的mounted只会执行一次 并合并其他组件的mounted所以 */
  mounted() {
    // 通知vuex发送求请，获取数据存储到我们home仓库 如果请求vc组件内 当每次切换路由时都会区重新请求数据 占用网络请求 我们直接卸载app管理组件中 真央来我们的请求之请求了一次
    // 派发一个active 获取三级分类的列表数据
    this.$store.dispatch('categoryList')
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
